<template>
  <CommonPage>
    <template #action>
      <NButton type="primary" @click="handleCreateVersion">
        <i class="i-material-symbols:add mr-4 text-18" />
        新增版本
      </NButton>
    </template>

    <MeCrud
      ref="$table"
      v-model:query-items="queryItems"
      :scroll-x="1400"
      :columns="columns"
      :get-data="api.pageQuery"
    >
      <MeQueryItem label="文件名" :label-width="70">
        <n-input
          v-model:value="queryItems.fileName"
          type="text"
          placeholder="请输入文件名"
          clearable
        />
      </MeQueryItem>

      <MeQueryItem label="版本号" :label-width="70">
        <n-input
          v-model:value="queryItems.versionNumber"
          type="text"
          placeholder="请输入版本号"
          clearable
        />
      </MeQueryItem>

      <MeQueryItem label="操作类型" :label-width="70">
        <n-select
          v-model:value="queryItems.operationType"
          :options="operationTypeOptions"
          label-field="label"
          value-field="value"
          clearable
          placeholder="请选择操作类型"
        />
      </MeQueryItem>

      <MeQueryItem label="状态" :label-width="70">
        <n-select
          v-model:value="queryItems.versionStatus"
          :options="versionStatusOptions"
          label-field="label"
          value-field="value"
          clearable
          placeholder="请选择版本状态"
        />
      </MeQueryItem>
    </MeCrud>

    <!-- 新增/编辑版本弹窗 -->
    <MeModal
      ref="versionModalRef"
      :title="versionModalTitle"
      :show-footer="true"
      width="600px"
    >
      <n-form
        ref="versionFormRef"
        label-placement="left"
        :model="versionForm"
        :rules="versionFormRules"
        label-width="100px"
      >
        <n-form-item label="文件ID" path="fileId" v-if="versionForm.id">
          <n-input v-model:value="versionForm.fileId" readonly />
        </n-form-item>
        <n-form-item label="版本号" path="versionNumber">
          <n-input v-model:value="versionForm.versionNumber" placeholder="请输入版本号" />
        </n-form-item>
        <n-form-item label="版本描述" path="description">
          <n-input
            v-model:value="versionForm.description"
            placeholder="请输入版本描述"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 5 }"
          />
        </n-form-item>
        <n-form-item label="版本状态" path="versionStatus">
          <n-select
            v-model:value="versionForm.versionStatus"
            :options="versionStatusOptions"
            label-field="label"
            value-field="value"
            placeholder="请选择版本状态"
          />
        </n-form-item>
        <n-form-item label="操作类型" path="operationType">
          <n-select
            v-model:value="versionForm.operationType"
            :options="operationTypeOptions"
            label-field="label"
            value-field="value"
            placeholder="请选择操作类型"
          />
        </n-form-item>
        <n-form-item label="上传文件" path="file">
          <n-upload
            v-model:file-list="uploadFileList"
            :max="1"
            :default-upload="false"
            :on-before-upload="handleBeforeUpload"
            :accept="'.zip,.rar,.7z,.html,.htm,.doc,.docx,.pdf,.jpg,.jpeg,.png,.gif,.svg'"
          >
            <n-button>
              <template #icon>
                <i class="i-material-symbols:upload" />
              </template>
              选择文件
            </n-button>
          </n-upload>
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space>
          <n-button @click="versionModalRef?.close()">取消</n-button>
          <n-button type="primary" :loading="versionLoading" @click="handleVersionSave">
            保存
          </n-button>
        </n-space>
      </template>
    </MeModal>

    <!-- 文件上传进度对话框 -->
    <n-modal v-model:show="showProgressModal" preset="card" style="width: 500px;" title="上传进度">
      <n-progress
        type="line"
        :percentage="uploadProgress"
        :indicator-placement="'inside'"
        processing
      />
      <p style="text-align: center; margin-top: 10px;">{{ uploadProgressText }}</p>
    </n-modal>

    <!-- 版本预览对话框 -->
    <MeModal
      ref="versionPreviewModalRef"
      title="版本预览"
      :show-footer="true"
      width="80%"
    >
      <div v-if="currentPreviewVersion" class="version-preview-container">
        <div class="version-preview-header">
          <div class="version-info">
            <h3>版本 {{ currentPreviewVersion.versionNumber }}</h3>
            <p class="version-description">{{ currentPreviewVersion.description }}</p>
            <div class="version-meta">
              <n-space>
                <n-tag type="info">{{ currentPreviewVersion.fileType }}</n-tag>
                <n-tag type="success">{{ formatFileSize(currentPreviewVersion.fileSize) }}</n-tag>
                <n-tag type="warning">{{ currentPreviewVersion.operationType }}</n-tag>
                <n-tag type="default">{{ currentPreviewVersion.versionStatus }}</n-tag>
              </n-space>
            </div>
          </div>
          <div class="version-actions">
            <n-space>
              <n-button
                v-if="currentPreviewVersion.canPreview && currentPreviewVersion.previewType !== 'download'"
                type="primary"
                @click="openPreview(currentPreviewVersion.previewUrl, currentPreviewVersion.previewType)"
              >
                <i class="i-material-symbols:visibility mr-2" />
                在线预览
              </n-button>
              <n-button
                @click="downloadVersion(currentPreviewVersion)"
              >
                <i class="i-material-symbols:download mr-2" />
                下载
              </n-button>
              <n-button
                @click="shareVersion(currentPreviewVersion)"
              >
                <i class="i-material-symbols:share mr-2" />
                分享
              </n-button>
            </n-space>
          </div>
        </div>

        <div class="version-preview-content">
          <n-tabs type="line" animated>
            <n-tab-pane name="preview" tab="预览信息">
              <div class="preview-info">
                <div class="info-item">
                  <label>文件ID:</label>
                  <span>{{ currentPreviewVersion.fileId }}</span>
                </div>
                <div class="info-item">
                  <label>文件类型:</label>
                  <span>{{ currentPreviewVersion.fileType }}</span>
                </div>
                <div class="info-item">
                  <label>文件大小:</label>
                  <span>{{ formatFileSize(currentPreviewVersion.fileSize) }}</span>
                </div>
                <div class="info-item">
                  <label>文件MD5:</label>
                  <span class="mono">{{ currentPreviewVersion.fileMd5 || '无' }}</span>
                </div>
                <div class="info-item">
                  <label>操作类型:</label>
                  <span>{{ currentPreviewVersion.operationType }}</span>
                </div>
                <div class="info-item">
                  <label>版本状态:</label>
                  <span>{{ currentPreviewVersion.versionStatus }}</span>
                </div>
                <div class="info-item">
                  <label>操作用户ID:</label>
                  <span>{{ currentPreviewVersion.operatorId }}</span>
                </div>
                <div class="info-item">
                  <label>创建时间:</label>
                  <span>{{ formatDateTime(currentPreviewVersion.createTime) }}</span>
                </div>
                <div class="info-item">
                  <label>更新时间:</label>
                  <span>{{ formatDateTime(currentPreviewVersion.updateTime) }}</span>
                </div>
              </div>
            </n-tab-pane>
            
            <n-tab-pane v-if="currentPreviewVersion.previewType === 'image'" name="image-preview" tab="图片预览">
              <div class="image-preview">
                <img 
                  :src="currentPreviewVersion.previewUrl" 
                  :alt="`版本 ${currentPreviewVersion.versionNumber}`"
                  class="preview-image"
                />
              </div>
            </n-tab-pane>

            <n-tab-pane v-if="currentPreviewVersion.previewType === 'html'" name="html-preview" tab="HTML预览">
              <div class="html-preview">
                <iframe 
                  :src="currentPreviewVersion.previewUrl" 
                  width="100%" 
                  height="600"
                  frameborder="0"
                ></iframe>
              </div>
            </n-tab-pane>
          </n-tabs>
        </div>
      </div>

      <template #footer>
        <n-space>
          <n-button @click="versionPreviewModalRef?.close()">关闭</n-button>
          <n-button 
            v-if="currentPreviewVersion && currentPreviewVersion.versionStatus === 'ACTIVE'"
            type="primary" 
            @click="handleRestoreVersion(currentPreviewVersion)"
          >
            回退到此版本
          </n-button>
        </n-space>
      </template>
    </MeModal>
  </CommonPage>
</template>

<script setup>
import { NButton, NInput, NSelect, NFormItem, NForm, NUpload, NModal, NProgress, NSpace } from 'naive-ui'
import { MeCrud, MeModal, MeQueryItem } from '@/components'
import { designFileVersionApi as api } from '@/api/pms'
import { onMounted, ref } from 'vue'

defineOptions({ name: 'DesignFileVersionMgt' })

const $table = ref(null)

/** QueryBar筛选参数（可选） */
const queryItems = ref({})

// 版本状态选项
const versionStatusOptions = ref([
  { label: '活跃', value: 'ACTIVE' },
  { label: '归档', value: 'ARCHIVED' },
  { label: '废弃', value: 'OBSOLETE' }
])

// 操作类型选项
const operationTypeOptions = ref([
  { label: '创建', value: 'CREATE' },
  { label: '更新', value: 'UPDATE' },
  { label: '回退', value: 'ROLLBACK' }
])

// 表格列定义
const columns = ref([
  {
    title: 'ID',
    key: 'id',
    width: 80,
  },
  {
    title: '文件ID',
    key: 'fileId',
    width: 120,
  },
  {
    title: '版本号',
    key: 'versionNumber',
    width: 150,
  },
  {
    title: '版本描述',
    key: 'description',
    width: 200,
    ellipsis: { tooltip: true }
  },
  {
    title: '文件类型',
    key: 'fileType',
    width: 120,
  },
  {
    title: '文件大小',
    key: 'fileSize',
    width: 120,
    render: (row) => row.fileSize ? formatFileSize(row.fileSize) : '-'
  },
  {
    title: '操作类型',
    key: 'operationType',
    width: 120,
    render: (row) => {
      const type = operationTypeOptions.value.find(opt => opt.value === row.operationType)
      return type ? type.label : row.operationType
    }
  },
  {
    title: '版本状态',
    key: 'versionStatus',
    width: 120,
    render: (row) => {
      const status = versionStatusOptions.value.find(opt => opt.value === row.versionStatus)
      return status ? status.label : row.versionStatus
    }
  },
  {
    title: '操作者',
    key: 'operatorId',
    width: 120,
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 180,
    render: (row) => row.createTime ? formatDateTime(row.createTime) : '-'
  },
  {
    title: '更新时间',
    key: 'updateTime',
    width: 180,
    render: (row) => row.updateTime ? formatDateTime(row.updateTime) : '-'
  },
  {
    title: '操作',
    key: 'actions',
    width: 300,
    fixed: 'right',
    render: (row) => [
      h(
        NButton,
        {
          size: 'small',
          type: 'primary',
          secondary: true,
          class: 'ml-12px',
          disabled: row.versionStatus === 'OBSOLETE',
          onClick: () => handleRestoreVersion(row),
        },
        {
          default: () => '回退到此版本',
          icon: () => h('i', { class: 'i-material-symbols:history text-14' }),
        }
      ),
      h(
        NButton,
        {
          size: 'small',
          type: 'warning',
          secondary: true,
          class: 'ml-12px',
          disabled: row.versionStatus === 'OBSOLETE',
          onClick: () => handleDeleteVersion(row),
        },
        {
          default: () => '删除',
          icon: () => h('i', { class: 'i-material-symbols:delete text-14' }),
        }
      ),
      h(
        NButton,
        {
          size: 'small',
          type: 'info',
          secondary: true,
          class: 'ml-12px',
          onClick: () => handlePreviewVersion(row),
        },
        {
          default: () => '预览',
          icon: () => h('i', { class: 'i-material-symbols:visibility text-14' }),
        }
      )
    ]
  }
])

// 版本管理相关
const versionModalRef = ref(null)
const versionModalTitle = ref('新增版本')
const versionFormRef = ref(null)
const versionForm = ref({
  id: null,
  fileId: null,
  versionNumber: '',
  description: '',
  versionStatus: 'ACTIVE',
  operationType: 'UPDATE'
})
const versionLoading = ref(false)
const uploadFileList = ref([])
const showProgressModal = ref(false)
const uploadProgress = ref(0)
const uploadProgressText = ref('准备上传...')

// 版本预览相关
const versionPreviewModalRef = ref(null)
const currentPreviewVersion = ref(null)

// 版本表单验证规则
const versionFormRules = {
  versionNumber: { required: true, message: '请输入版本号', trigger: 'blur' },
  description: { required: true, message: '请输入版本描述', trigger: 'blur' }
}

// 新增版本
function handleCreateVersion() {
  versionForm.value = {
    id: null,
    fileId: null,
    versionNumber: '',
    description: '',
    versionStatus: 'ACTIVE',
    operationType: 'UPDATE'
  }
  uploadFileList.value = []
  versionModalTitle.value = '新增版本'
  versionModalRef.value?.open()
}

// 保存版本
async function handleVersionSave() {
  try {
    await versionFormRef.value?.validate()
    
    versionLoading.value = true
    
    if (versionForm.value.id) {
      // 更新版本
      await api.updateVersion(versionForm.value.id, versionForm.value)
    } else {
      // 创建新版本
      if (uploadFileList.value.length > 0) {
        // 如果有上传文件，需要先上传文件
        const formData = new FormData()
        formData.append('file', uploadFileList.value[0].file)
        formData.append('fileId', versionForm.value.fileId)
        formData.append('versionNumber', versionForm.value.versionNumber)
        formData.append('description', versionForm.value.description)
        formData.append('versionStatus', versionForm.value.versionStatus)
        formData.append('operationType', versionForm.value.operationType)
        
        await uploadVersionFile(formData)
      } else {
        // 如果没有上传文件，直接创建版本记录
        await api.createVersion(versionForm.value.fileId, versionForm.value)
      }
    }
    
    $table.value?.handleSearch()
    versionModalRef.value?.close()
    $message.success(versionForm.value.id ? '更新成功' : '创建成功')
  } catch (error) {
    console.error('保存版本失败:', error)
    $message.error('保存失败: ' + (error.message || '未知错误'))
  } finally {
    versionLoading.value = false
  }
}

// 上传版本文件
async function uploadVersionFile(formData) {
  showProgressModal.value = true
  uploadProgress.value = 0
  uploadProgressText.value = '开始上传...'

  try {
    // 模拟上传进度
    const interval = setInterval(() => {
      if (uploadProgress.value < 95) {
        uploadProgress.value += 5
        uploadProgressText.value = `上传中... ${uploadProgress.value}%`
      }
    }, 200)

    // 这里应该调用实际的上传API
    // await api.uploadVersionFile(formData)
    
    setTimeout(() => {
      clearInterval(interval)
      uploadProgress.value = 100
      uploadProgressText.value = '上传完成'
      setTimeout(() => {
        showProgressModal.value = false
      }, 500)
    }, 2000)
  } catch (error) {
    console.error('上传文件失败:', error)
    showProgressModal.value = false
    throw error
  }
}

// 删除版本
async function handleDeleteVersion(row) {
  $dialog.warning({
    title: '确认删除',
    content: `确定要删除版本 ${row.versionNumber} 吗？此操作不可恢复！`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      try {
        await api.deleteVersion(row.id)
        $table.value?.handleSearch()
        $message.success('删除成功')
      } catch (error) {
        console.error('删除版本失败:', error)
        $message.error('删除失败: ' + (error.message || '未知错误'))
      }
    }
  })
}

// 回退到指定版本
async function handleRestoreVersion(row) {
  $dialog.warning({
    title: '确认回退',
    content: `确定要回退到版本 ${row.versionNumber} 吗？当前版本将被替换！`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      try {
        await api.restoreToVersion(row.fileId, row.versionNumber)
        $table.value?.handleSearch()
        $message.success('回退成功')
      } catch (error) {
        console.error('回退版本失败:', error)
        $message.error('回退失败: ' + (error.message || '未知错误'))
      }
    }
  })
}

// 预览版本
async function handlePreviewVersion(row) {
  try {
    console.log('预览版本 - row数据:', row)
    console.log('预览版本 - row.id:', row.id)
    
    // 检查版本ID是否存在
    if (!row.id) {
      $message.error('版本ID不存在')
      return
    }
    
    // 使用版本ID获取预览URL
    const response = await api.getVersionSharePreviewUrl(row.id, 'permanent')
    const previewUrl = response.data
    
    if (previewUrl) {
      // 直接打开预览
      window.open(previewUrl, '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes')
      $message.success('正在打开版本预览...')
    } else {
      $message.error('获取预览URL失败')
    }
  } catch (error) {
    console.error('预览版本失败:', error)
    $message.error('预览失败: ' + (error.message || '未知错误'))
  }
}

// 显示图片预览
function showImagePreview(imageUrl, versionInfo) {
  const modal = document.createElement('div')
  modal.className = 'version-image-preview-modal'
  modal.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  `
  
  const img = document.createElement('img')
  img.src = imageUrl
  img.style.cssText = `
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
  `
  
  const info = document.createElement('div')
  info.style.cssText = `
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 10px 20px;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
  `
  info.textContent = `版本: ${versionInfo.versionNumber} | 文件类型: ${versionInfo.fileType} | 大小: ${formatFileSize(versionInfo.fileSize)}`
  
  modal.appendChild(img)
  modal.appendChild(info)
  document.body.appendChild(modal)
  
  // 点击背景关闭
  modal.addEventListener('click', () => {
    document.body.removeChild(modal)
  })
}

// 打开在线预览
function openPreview(previewUrl, previewType) {
  if (!previewUrl) {
    $message.error('预览URL不存在')
    return
  }
  
  switch (previewType) {
    case 'html':
      // HTML文件在新窗口中打开预览
      window.open(previewUrl, '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes')
      $message.success('正在打开HTML预览...')
      break
    case 'image':
      // 图片显示在新的全屏窗口中
      const imageWindow = window.open('', '_blank', 'width=1000,height=800,scrollbars=yes,resizable=yes')
      imageWindow.document.write(`
        <html>
          <head><title>图片预览</title></head>
          <body style="margin:0; padding:20px; background:#000; display:flex; justify-content:center; align-items:center; min-height:100vh;">
            <img src="${previewUrl}" style="max-width:100%; max-height:100%; object-fit:contain;" />
          </body>
        </html>
      `)
      $message.success('正在打开图片预览...')
      break
    case 'document':
      // 文档在新窗口中打开预览
      window.open(previewUrl, '_blank')
      $message.success('正在打开文档预览...')
      break
    default:
      // 其他类型显示信息
      $message.warning('该文件类型暂不支持在线预览')
      break
  }
}

// 下载版本文件
function downloadVersion(version) {
  try {
    if (!version.previewUrl) {
      $message.error('下载URL不存在')
      return
    }
    
    const link = document.createElement('a')
    link.href = version.previewUrl
    link.download = `版本${version.versionNumber}-${version.fileType}`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    
    $message.success('文件下载开始')
  } catch (error) {
    console.error('下载失败:', error)
    $message.error('下载失败: ' + (error.message || '未知错误'))
  }
}

// 分享版本
async function shareVersion(version) {
  try {
    console.log('分享版本 - version数据:', version)
    console.log('分享版本 - version.id:', version.id)
    
    // 检查版本ID是否存在
    if (!version.id) {
      $message.error('版本ID不存在')
      return
    }
    
    // 使用版本ID获取分享URL
    const response = await api.getVersionSharePreviewUrl(version.id, 'permanent')
    const shareUrl = response.data
    
    if (!shareUrl) {
      $message.error('获取分享URL失败')
      return
    }
    
    // 复制到剪贴板
    navigator.clipboard.writeText(shareUrl).then(() => {
      $message.success('分享链接已复制到剪贴板')
    }).catch(err => {
      console.error('复制失败:', err)
      // 如果复制失败，显示URL供手动复制
      $dialog.info({
        title: '分享链接',
        content: () => h('div', [
          h('p', '请手动复制以下链接进行分享：'),
          h('p', { style: { color: '#999', fontSize: '12px', marginBottom: '8px' }}, 
            `版本: ${version.versionNumber} - ${version.fileType}`),
          h('input', {
            value: shareUrl,
            readonly: true,
            style: {
              width: '100%',
              padding: '8px',
              marginTop: '8px',
              borderRadius: '4px',
              border: '1px solid #d9d9d9'
            },
            onClick: (e) => {
              e.target.select()
            }
          })
        ]),
        positiveText: '确定'
      })
    })
  } catch (error) {
    console.error('分享失败:', error)
    $message.error('分享失败: ' + (error.message || '未知错误'))
  }
}

// 文件上传前处理
function handleBeforeUpload(file) {
  // 可以在这里添加文件类型和大小验证
  return true
}

// 格式化文件大小
function formatFileSize(size) {
  if (!size) return '-'
  if (size < 1024) return size + ' B'
  else if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB'
  else if (size < 1024 * 1024 * 1024) return (size / 1024 / 1024).toFixed(2) + ' MB'
  else return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
}

// 格式化日期时间
function formatDateTime(timestamp) {
  if (!timestamp) return '-'
  const date = new Date(timestamp)
  return date.toLocaleString('zh-CN')
}

onMounted(() => {
  $table.value?.handleSearch()
})
</script>

<style scoped>
/* 版本预览容器样式 */
.version-preview-container {
  padding: 0;
}

.version-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.version-info h3 {
  margin: 0 0 8px 0;
  color: #262626;
  font-size: 18px;
  font-weight: 600;
}

.version-description {
  margin: 0 0 12px 0;
  color: #595959;
  font-size: 14px;
  line-height: 1.5;
}

.version-meta {
  margin-top: 8px;
}

.version-actions {
  flex-shrink: 0;
  margin-left: 20px;
}

.version-preview-content {
  padding: 24px;
  max-height: 600px;
  overflow-y: auto;
}

/* 预览信息样式 */
.preview-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-item label {
  min-width: 100px;
  font-weight: 500;
  color: #262626;
  margin-right: 12px;
}

.info-item span {
  color: #595959;
}

.mono {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  word-break: break-all;
}

/* 图片预览样式 */
.image-preview {
  text-align: center;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 6px;
}

.preview-image {
  max-width: 100%;
  max-height: 400px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* HTML预览样式 */
.html-preview {
  height: 600px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .version-preview-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .version-actions {
    margin-left: 0;
    margin-top: 16px;
  }
  
  .preview-info {
    grid-template-columns: 1fr;
  }
  
  .version-preview-content {
    padding: 16px;
  }
}

/* 全局样式 */
.version-image-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 标签样式优化 */
:deep(.n-tag) {
  margin-right: 4px;
  margin-bottom: 4px;
}

:deep(.n-space) {
  flex-wrap: wrap;
}
</style>